<template>
  <van-nav-bar
    title="搜索"
    left-text="返回"
    left-arrow
    @click-left="
      () => {
        $router.back('/');
      }
    "
  />

  <van-search
    v-model="searchVal"
    shape="round"
    placeholder="请输入搜索关键词"
  />
  <van-empty
    description="暂无搜索数据"
    v-if="searchVal.length == 0 || searchData.length == 0"
  />
  <div v-else></div>
  <van-cell-group v-for="item in searchData">
    <router-link :to="'/detail/'+item.goods_id">
      <van-cell :title="item.goods_name" />
    </router-link>
    
  </van-cell-group>
</template>

<script setup>
import { ref, watch } from "vue";
let searchVal = ref("");
let searchData = ref([]);
import { searchApi } from "@/api/api";
import _ from 'lodash'
watch(searchVal, _.debounce((searchVal) => {
  searchApi(searchVal).then((res) => {
    console.log("搜索数据", res);
    searchData.value = res.data.message;
  });
},3000));
</script>

<style lang="scss" scoped></style>
